<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost库智能搜索</title>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #00c6ff 0%, #007bff 100%);
            --card-bg: #ffffff;
            --surface-bg: #f8f9fa;
            --shadow-color: rgba(0, 0, 0, 0.05);
            --border-radius: 12px;
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            line-height: 1.7;
            min-height: 100vh;
            background: var(--surface-bg);
        }

        .search-container {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
            text-align: center;
        }

        .logo {
            font-size: 3.25rem;
            font-weight: 600;
            position: relative;
            margin-bottom: 3rem;
        }

        .logo::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 4px;
            background: var(--primary-gradient);
            left: 0;
            bottom: -10px;
            border-radius: 2px;
            transform: scaleX(0);
            transition: transform 0.4s ease-in-out;
            transform-origin: left;
        }

        .logo:hover::before {
            transform: scaleX(1);
        }

        .search-box {
            position: relative;
            margin-bottom: 5rem;
        }

        #searchInput {
            width: 100%;
            padding: 22px 25px;
            border: 0;
            border-radius: var(--border-radius);
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 8px 20px var(--shadow-color);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        #searchInput:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1);
            background: white;
        }

        #searchButton {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            padding: 0 28px;
            background: var(--primary-gradient);
            border: none;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        #searchButton:hover {
            filter: brightness(1.05);
            transform: translateX(-2px);
        }

        #searchButton:active {
            transform: translateX(0);
        }

        .result-container {
            display: grid;
            gap: 25px;
        }

        .result-item {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 12px var(--shadow-color);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .result-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .result-title {
            font-size: 1.375rem;
            font-weight: 500;
            line-height: 1.3;
            margin-bottom: 0.75rem;
        }

        .result-title a {
            color: #1a1a1a;
            text-decoration: none;
            transition: color 0.3s ease-in-out;
        }

        .result-title a:hover {
            color: #0056b3;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .result-desc {
            font-size: 1rem;
            line-height: 1.7;
            color: #3c4043;
            margin-bottom: 0.5rem;
        }

        .result-url {
            font-family: var(--font-mono);
            font-size: 0.875rem;
            color: #006d3c;
            word-break: break-all;
        }

        .skeleton {
            height: 100px;
            border-radius: var(--border-radius);
            background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% { background-position: -200% 0 }
            100% { background-position: 200% 0 }
        }

        .no-results {
            text-align: center;
            padding: 60px;
            color: #6c757d;
            font-size: 1.1rem;
        }

        @media (prefers-color-scheme: dark) {
            body {
                --surface-bg: #1a1a1a;
                --card-bg: #2d2d2d;
                --shadow-color: rgba(255, 255, 255, 0.05);
            }
            
            #searchInput {
                background: rgba(255, 255, 255, 0.05);
            }
            
            #searchInput:focus {
                background: rgba(255, 255, 255, 0.1);
            }
            
            .result-title a {
                color: #e8eaed;
            }
            
            .result-desc {
                color: #c9ccd1;
            }
            
            .result-url {
                color: #7bc77b;
            }
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 2.75rem;
            }
            
            #searchInput {
                padding: 18px 20px;
                font-size: 0.95rem;
            }
            
            #searchButton {
                padding: 0 22px;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="search-container">
        <div class="logo">Boost库搜索</div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索Boost组件、函数或文档...">
            <button id="searchButton">搜索</button>
        </div>
        <div id="resultsContainer"></div>
    </div>

    <script>
        const resultsContainer = document.getElementById('resultsContainer');
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');

        let searchTimer;
        function handleSearch() {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(performSearch, 300);
        }

        async function performSearch() {
            const query = searchInput.value.trim();
            if (!query) return;

            resultsContainer.innerHTML = `
                <div class="skeleton"></div>
                <div class="skeleton"></div>
                <div class="skeleton"></div>
            `;

            try {
                const response = await fetch(`/search?wd=${encodeURIComponent(query)}`);
                const data = await response.json();

                if (!data.length) {
                    resultsContainer.innerHTML = '<div class="no-results">未找到相关结果</div>';
                    return;
                }

                const html = data.map(item => `
                    <div class="result-item">
                        <div class="result-title">
                            <a href="${escapeHtml(item.url)}" target="_blank">
                                ${escapeHtml(item.title)}
                            </a>
                        </div>
                        <div class="result-desc">${escapeHtml(item.desc)}</div>
                        <div class="result-url">${new URL(item.url).hostname}</div>
                    </div>
                `).join('');

                resultsContainer.innerHTML = html;
                
            } catch (error) {
                resultsContainer.innerHTML = '<div class="no-results">搜索出错，请稍后再试</div>';
                console.error('搜索错误:', error);
            }
        }

        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "<")
                .replace(/>/g, ">")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        searchButton.addEventListener('click', performSearch);
        searchInput.addEventListener('keydown', (e) => e.key === 'Enter' && performSearch());
        searchInput.focus();
    </script>
</body>
</html>